<template>
    <div class="table">
        <div class="topBtn"> 
          <span>活动配置条件</span>
          <el-button type="primary" size="small" @click="openCondition">添加条件</el-button>
        </div>
        <el-table
        :data="conditionListTable"
        border
        style="width: 100%">
            <el-table-column
                prop="id"
                label="条件ID"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="条件名称">
            </el-table-column>
            <el-table-column
                prop="code"
                label="条件代码">
            </el-table-column>
            <el-table-column
                prop="params"
                label="条件参数">
                <template slot-scope="scope">
                  <p style="margin-bottom:0;" v-if="scope.row.code=='ORDER_FULL'">订单满{{scope.row.params.money}}元满足条件</p>
                  <p style="margin-bottom:0;" v-else-if="scope.row.code=='ORDER_SINGLE'">单笔满{{scope.row.params.money}}元前{{scope.row.params.ranking}}名满足条件</p>
                  <p style="margin-bottom:0;" v-else-if="scope.row.code=='ORDER_EVERY'">线上每消费{{scope.row.params.money}}元满足条件</p>
                  <p style="margin-bottom:0;" v-else-if="scope.row.code=='ORDER_STORE'">商户id：{{scope.row.params.store_id}}消费满{{scope.row.params.money}}元满足条件</p>
                  <p style="margin-bottom:0;" v-else-if="scope.row.code=='ORDER_CATEGORY'">跨品类消费每个品类消费满{{scope.row.params.money}}元满足条件</p>
                  <p style="margin-bottom:0;" v-else-if="scope.row.code=='ORDER_SINGLE_CATEGORY'">单笔跨品类消费每个品类消费满{{scope.row.params.money}}元满足条件</p>
                </template>
            </el-table-column>
            <el-table-column
                label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="editCondition(scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="delCondition(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- <div class="block">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </div> -->
        
        <!-- 添加条件弹框 -->
        <el-dialog title="配置活动条件" @closed="closedFn" width="40%" :visible.sync="dialogVisibleCondition">
            <el-select style="width:50%" value-key="key" v-model="conditionValue" filterable placeholder="请选择">
                <el-option
                v-for="item in conditionList"
                :key="item.key"
                :label="item.name"
                :value="{name:item.name,key:item.key}">
                </el-option>
            </el-select>
            <el-dialog
                width="40%"
                title="添加条件"
                :visible.sync="innerVisible"
                @closed="innerClosedFn"
                @open="openInner"
                append-to-body>
                <div class="conditionBox">
                  满足条件：{{conditionValue.name}}
                  <div class="item"><span class="tit">订单满：</span><el-input type="number" v-model="conditionMoney"></el-input>元</div>
                  <div class="item" v-if="conditionValue.key=='ORDER_SINGLE'"><span class="tit">前</span><el-input type="number" v-model="conditionRank"></el-input>名用户</div>
                  <!-- <div class="item" v-if="conditionValue.key=='ORDER_EVERY'"><span class="tit">送</span><el-input type="number" v-model="couponLimit"></el-input>张券</div> -->
                  <div class="item" v-if="conditionValue.key=='ORDER_STORE'"><span class="tit">指定商户：</span>
                    <div>
                      <div style="display:flex;justify-content: flex-end;margin-bottom:5px;">
                        <el-input v-model="searchStore" placeholder="请输入商户信息" clearable @input="clearPrizeFn"></el-input>
                        <el-button type="primary" size="small" @click="searchStoreFn">搜索</el-button>
                      </div>
                      <el-table
                        border
                        :data="storeList"
                        style="width: 100%">
                        <el-table-column
                          align="center"
                          width="50">
                          <template slot-scope="scope">
                            <el-radio v-model="store_id" :label="scope.row.store_id">{{''}}</el-radio>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="date"
                          align="center"
                          label="商户logo"
                          width="80">
                          <template slot-scope="scope">
                            <img style="width:30px;height:30px;" :src="scope.row.store_logo" alt="">
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="store_name"
                          align="center"
                          label="商户名称"
                          width="auto">
                        </el-table-column>
                      </el-table>
                      <pagination :total="totalStore" v-model="pageStore" :pageSize.sync="pagesizeStore" :pagesize="pagesizeStore" :pageSizeOptions="pageSizeOptions" :showQuickJumper="true" @change="handleCurrentChangeStore" @onShowSizeChange="handleSizeChangeStore"></pagination>
                    </div>
                  </div>
                </div>
                <div slot="footer" class="dialog-footer">
                <el-button @click="innerVisible = false">取 消</el-button>
                <el-button type="primary" @click="addCondition">确 定</el-button>
                </div>
            </el-dialog>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleCondition = false">取 消</el-button>
                <el-button type="primary" @click="conditionNext">下一步</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
  import pagination from '@/common/pagination.vue'
export default {
    props:{
        activityId:{
            type:Number,
            default:''
        }
    },
    components:{
      pagination,
    },
    data(){
        return{
            page:1,
            pagesize:10,
            total:0,
            conditionListTable:[],
            conditionList:[],

            // 条件框
            dialogVisibleCondition:false,
            conditionList:[], //条件列表
            conditionValue:{}, //条件选中
            innerVisible:false,
            conditionMoney:'',//订单金额
            conditionRank:'',//用户数
            // conditionName:'',//条件名称
            condId:'',//条件id
            // condLimit:''
            couponLimit:1,//优惠券张数

            pageStore:1,
            pagesizeStore:5,
            totalStore:0,
            searchStore:'',
            storeList:[],
            store_id:'',
            pageSizeOptions:[5, 10, 15, 20]
        }
    },
    methods: {
        // 获取活动条件列表
        getConditionList(){
            let params = {
                activity_id:this.activityId
            }
            this.$http.post('/api/root/activity/cond/lists',params).then(res=>{
                console.log(res,'奖品条件');
                if(res.code==1){
                    this.conditionListTable = res.data?res.data:[];
                    // this.total = res.data.total
                }
            })
        },

        // 删除条件
        delCondition(id){
            this.$confirm('此操作将删除该条件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(()=>{
              let params = {
                activity_id:this.activityId,
                id
              }
              this.$http.post('/api/root/activity/cond/del',params).then(res=>{
                console.log(res);
                if(res.code==1){
                  this.getConditionList();
                  this.$message({
                    type:'success',
                    message:'删除成功'
                  })
                }else{
                  this.$message.warning(res.msg)
                }
              })
            })
        },

        // 获取商户列表
        getStoreList(){
          let params = {
            page:this.pageStore,
            pagesize:this.pagesizeStore,
            keyword:this.searchStore
          }
          this.$http.post('/api/root/StoreShop/lst',params).then(res=>{
            console.log(res,'商户列表');
            if(res.code==1){
              this.storeList = res.data.data?res.data.data:[];
              this.totalStore = res.data.count
            }
          })
        },

        // 编辑按钮
        async editCondition(row){
            console.log(row,'---');
            this.condId = row.id
            this.dialogVisibleCondition = true
            await this.getCondition()
            this.innerVisible = true
            let indexCond = this.conditionList.findIndex(item=>item.key==row.code)
            this.conditionValue = {name:this.conditionList[indexCond].name, key:row.code}
            // this.conditionName = row.name;
            this.conditionRank = row.params.ranking;
            this.conditionMoney = row.params.money;
            // this.couponLimit = row.params.limit;
            this.store_id = row.params.store_id;
        },

        
        // 打开条件选择框
        openCondition(){
          this.dialogVisibleCondition = true;
          this.condId = '';
          this.getCondition()
        },
        // 获取条件
        async getCondition(){
          await this.$http.post('/api/root/activity/cond/config').then(res=>{
            console.log(res,'条件列表');
            if(res.code==1){
              let arr = []
              for(let key in res.data){
                res.data[key].key = key
                arr.push(res.data[key])
              }
              this.conditionList = arr
              console.log(this.conditionList,'////');
            }
          })
        },
        // 选择条件后下一步
        conditionNext(){
          if(!Object.keys(this.conditionValue).length){
            this.$message.warning('请选择条件')
            return
          }
          this.innerVisible = true;
          // this.getStoreList()
        },
        // 添加条件确定
        addCondition(){
          if(this.conditionMoney=='' || this.conditionMoney*1<=0){
              this.$message.warning('金额必须大于0元')
              return
          }
          let obj = {
            money:this.conditionMoney
          }
          if(this.conditionValue.key=='ORDER_SINGLE'){
            if(!this.conditionRank){
              this.$message.warning('请输入前XX名')
              return
            }
             obj.ranking = this.conditionRank
          }

          // if(this.conditionValue.key=='ORDER_EVERY'){
          //   console.log('111');
          //   if(this.couponLimit*1<1){
          //     this.$message.warning('最少送一张券')
          //     this.couponLimit = 1
          //     return
          //   }
          //   obj.limit = this.couponLimit?this.couponLimit:1
          // }
          if(this.conditionValue.key=='ORDER_STORE'){
            if(!this.store_id){
              this.$message.warning('请选择商户')
              return
            }
            obj.store_id = this.store_id
          }
          let params = {
            id:this.condId,
            activity_id:this.activityId,
            name:this.conditionValue.name,
            params:obj,
            code:this.conditionValue.key,
          }
          this.$http.post('/api/root/activity/cond/save',params).then(res=>{
            console.log(res,'添加条件结果');
            if(res.code == 1){
              this.$message.success(this.condId?'修改成功':'添加成功')
              this.innerVisible = false;
              this.dialogVisibleCondition = false;
              this.conditionValue = {}
              this.getConditionList()
            }else{
              this.$message.warning(res.msg)
            }
          })
        },

        // 关闭对话框后
        closedFn(){
            this.conditionValue = {}
            this.condId = ''
        },
        // 关闭对话框（内层）
        innerClosedFn(){
          this.conditionRank = '';
          this.conditionMoney = '';
          this.conditionName = '';
          this.searchStore = '';
          this.store_id = '';
          if(this.condId){
            this.dialogVisibleCondition = false
          }
        },
        // 打开内层对话框
        openInner(){
          if(this.conditionValue.key == 'ORDER_STORE'){
            this.getStoreList()
          }
        },

        // 搜索商户
        searchStoreFn(){
          this.pageStore = 1
          this.pagesizeStore = 5
          this.getStoreList()
        },


        handleSizeChange(val){
            this.pagesize = val
            this.getConditionList()
        },
        handleCurrentChange(val){
            this.page = val
            this.getConditionList()
        },

        handleSizeChangeStore(current, size){
            this.pageStore = 1
            this.pagesizeStore = size
            this.getStoreList()
        },
        handleCurrentChangeStore(current, size){
            this.pageStore = current
            this.pagesizeStore = size
            this.getStoreList()
        },
    },
}
</script>

<style lang="less">
.table{
    padding-bottom: 20px;
    .block{
        display: flex;
        justify-content: flex-end;
        padding-top: 20px;
    }
}
.topBtn{
    display:flex;
    align-items:center;
    margin-bottom:15px;
    span{
        font-weight:600;
        margin-right:10px;
    }
}

.conditionBox{
  .item{
    display: flex;
    align-items: center;
    margin-top: 15px;
    .tit{
      width: 70px;
      text-align: right;
    }
    .el-input{
      width: 30%;
      margin-right: 10px;
    }
  }
}
</style>

